﻿<UserControl
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" xmlns:System="clr-namespace:System;assembly=mscorlib" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="Taste.Demos.Silverlight.MainView"
  mc:Ignorable="d"
  d:DesignHeight="350" d:DesignWidth="450" d:DataContext="{d:DesignData /SampleData/MainViewModelSampleData.xaml}"
  x:Name="view">

	<i:Interaction.Triggers>
		<ei:PropertyChangedTrigger Binding="{Binding CurrentState}">
			<ei:GoToStateAction TargetObject="{Binding ElementName=view}" StateName="{Binding CurrentState}"/>
		</ei:PropertyChangedTrigger>
	</i:Interaction.Triggers>

  <UserControl.Resources>
    <Style x:Key="MainBorderStyle" TargetType="Border">
      <Setter Property="CornerRadius" Value="10" />
      <Setter Property="BorderThickness" Value="1" />
      <Setter Property="BorderBrush" Value="DarkGray" />
      <Setter Property="Padding" Value="5" />
      <Setter Property="Background" Value="White" />
      <Setter Property="Width" Value="360" />
      <Setter Property="Height" Value="300" />
      <Setter Property="HorizontalAlignment" Value="Center" />
      <Setter Property="VerticalAlignment" Value="Center" />
    </Style>
    <Style x:Key="TitleBorderStyle" TargetType="Border">
      <Setter Property="Margin" Value="0,5" />
    </Style>
    <Style x:Key="DetailsBorderStyle" TargetType="Border">
      <Setter Property="Margin" Value="2" />
      <Setter Property="BorderThickness" Value="1" />
      <Setter Property="BorderBrush" Value="LightGray" />
      <Setter Property="Padding" Value="2" />
      <Setter Property="Grid.Row" Value="1" />
    </Style>
    <Style x:Key="DataBorderStyle" TargetType="Border">
      <Setter Property="Margin" Value="2" />
      <Setter Property="Grid.Row" Value="2" />
    </Style>
    <Style x:Key="ErrorBorderStyle" TargetType="Border">
      <Setter Property="Opacity" Value="0.88" />
      <Setter Property="Background" Value="White" />
      <Setter Property="Grid.RowSpan" Value="2" />
      <Setter Property="Grid.Row" Value="1" />
    </Style>
    <Style x:Key="LabelTbkStyle" TargetType="TextBlock">
      <Setter Property="HorizontalAlignment" Value="Right" />
      <Setter Property="VerticalAlignment" Value="Center" />
      <Setter Property="FontSize" Value="13.333" />
      <Setter Property="Margin" Value="0,0,10,0" />
    </Style>
    <Style x:Key="ReadOnlyTbkStyle" TargetType="TextBlock">
      <Setter Property="VerticalAlignment" Value="Center" />
      <Setter Property="FontSize" Value="13.333" />
      <Setter Property="Margin" Value="4,0,0,0" />
      <Setter Property="Grid.Column" Value="1" />
    </Style>
    <Style x:Key="EditableTbxStyle" TargetType="TextBox">
      <Setter Property="FontSize" Value="13.333" />
      <Setter Property="Grid.Column" Value="1" />
    </Style>
    <Style x:Key="ActionsStkStyle" TargetType="StackPanel">
      <Setter Property="Orientation" Value="Horizontal" />
      <Setter Property="HorizontalAlignment" Value="Center" />
      <Setter Property="Grid.Row" Value="2" />
      <Setter Property="Grid.ColumnSpan" Value="2" />
    </Style>
    <Style x:Key="ActionBtnStyle" TargetType="Button">
      <Setter Property="Padding" Value="10,3" />
      <Setter Property="Margin" Value="5" />
    </Style>
    <DataTemplate x:Key="DataItemTemplate">
      <Border Margin="1" BorderBrush="LightGray" BorderThickness="1" Padding="2">
        <Grid Height="22">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
          </Grid.ColumnDefinitions>
          <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
            <TextBlock Text="First Name : " />
            <TextBlock Text="{Binding FirstName}" />
          </StackPanel>
          <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Grid.Column="1">
            <TextBlock Text="Last Name : "/>
            <TextBlock Text="{Binding LastName}" />
          </StackPanel>
          <Button Content="View" Command="{Binding ViewModel.ViewCommand, ElementName=view}" CommandParameter="{Binding}" HorizontalAlignment="Left" d:LayoutOverrides="Height" Grid.Column="2" />
        </Grid>
      </Border>
    </DataTemplate>
    <Style x:Key="DataListStyle" TargetType="ItemsControl">
      <Setter Property="ItemTemplate" Value="{StaticResource DataItemTemplate}" />
      <Setter Property="ItemsPanel">
        <Setter.Value>
          <ItemsPanelTemplate>
            <StackPanel />
          </ItemsPanelTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </UserControl.Resources>

  <Border Style="{StaticResource MainBorderStyle}">
		<VisualStateManager.VisualStateGroups>
			<VisualStateGroup x:Name="MainStates">
				<VisualState x:Name="LoadingData">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(BusyIndicator.IsBusy)" Storyboard.TargetName="busyIndicator">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<System:Boolean>True</System:Boolean>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(BusyIndicator.BusyContent)" Storyboard.TargetName="busyIndicator">
							<DiscreteObjectKeyFrame KeyTime="0" Value="Loading..."/>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
				<VisualState x:Name="ViewingData"/>
				<VisualState x:Name="CreatingData">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="editDataPanel">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Visible</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="viewDataPanel">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Collapsed</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
				<VisualState x:Name="EditingData">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="editDataPanel">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Visible</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="viewDataPanel">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Collapsed</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
				<VisualState x:Name="SavingData">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(BusyIndicator.IsBusy)" Storyboard.TargetName="busyIndicator">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<System:Boolean>True</System:Boolean>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(BusyIndicator.BusyContent)" Storyboard.TargetName="busyIndicator">
							<DiscreteObjectKeyFrame KeyTime="0" Value="Saving..."/>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
				<VisualState x:Name="Failed">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="errorOverlay">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Visible</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
		</VisualStateManager.VisualStateGroups>

		<toolkit:BusyIndicator x:Name="busyIndicator">
			<Grid x:Name="LayoutRoot">
				<Grid.RowDefinitions>
					<RowDefinition Height="Auto"/>
					<RowDefinition Height="Auto"/>
					<RowDefinition Height="*"/>
				</Grid.RowDefinitions>
        <Border Style="{StaticResource TitleBorderStyle}">
          <Grid>
            <TextBlock Text="Taste Demo" FontSize="13.333" FontWeight="Bold" />
            <TextBlock Text="{Binding CurrentState, StringFormat=Current State : \{0\}}" HorizontalAlignment="Right" VerticalAlignment="Center" FontStyle="Italic" />
          </Grid>
        </Border>

        <Border Style="{StaticResource DetailsBorderStyle}">
					<Grid>
						<Grid x:Name="viewDataPanel" >
							<Grid.ColumnDefinitions>
								<ColumnDefinition Width="*"/>
								<ColumnDefinition Width="*"/>
							</Grid.ColumnDefinitions>
							<Grid.RowDefinitions>
								<RowDefinition Height="28"/>
								<RowDefinition Height="28"/>
								<RowDefinition Height="Auto"/>
							</Grid.RowDefinitions>

              <TextBlock Text="First Name" Grid.Row="0" Style="{StaticResource LabelTbkStyle}"  />
              <TextBlock Text="Last Name" Grid.Row="1" Style="{StaticResource LabelTbkStyle}" />
              <TextBlock Text="{Binding CurrentCustomer.FirstName}" Grid.Row="0" Style="{StaticResource ReadOnlyTbkStyle}" />
              <TextBlock Text="{Binding CurrentCustomer.LastName}" Grid.Row="1" Style="{StaticResource ReadOnlyTbkStyle}"/>

              <StackPanel Style="{StaticResource ActionsStkStyle}">
                <Button Content="Edit" Command="{Binding EditCommand}" Style="{StaticResource ActionBtnStyle}" />
                <Button Content="Create" Command="{Binding CreateCommand}" Style="{StaticResource ActionBtnStyle}" />
							</StackPanel>
						</Grid>
    
						<Grid x:Name="editDataPanel" Visibility="Collapsed">
							<Grid.ColumnDefinitions>
								<ColumnDefinition Width="*"/>
								<ColumnDefinition Width="*"/>
							</Grid.ColumnDefinitions>
							<Grid.RowDefinitions>
								<RowDefinition Height="*"/>
								<RowDefinition Height="*"/>
								<RowDefinition Height="Auto"/>
							</Grid.RowDefinitions>

              <TextBlock Text="First Name" Grid.Row="0" Style="{StaticResource LabelTbkStyle}"  />
              <TextBlock Text="Last Name" Grid.Row="1" Style="{StaticResource LabelTbkStyle}" />
              <TextBox Text="{Binding CurrentCustomer.FirstName, Mode=TwoWay}" Grid.Row="0" Style="{StaticResource EditableTbxStyle}" />
              <TextBox Text="{Binding CurrentCustomer.LastName, Mode=TwoWay}" Grid.Row="1" Style="{StaticResource EditableTbxStyle}" />

              <StackPanel Style="{StaticResource ActionsStkStyle}">
                <Button Content="Save" Command="{Binding SaveCommand}" Style="{StaticResource ActionBtnStyle}" />
                <Button Content="Cancel" Command="{Binding CancelCommand}" Style="{StaticResource ActionBtnStyle}" />
							</StackPanel>
						</Grid>
					</Grid>
				</Border>
        
        <Border Style="{StaticResource DataBorderStyle}">
          <ScrollViewer>
            <ItemsControl ItemsSource="{Binding Customers}" Style="{StaticResource DataListStyle}" />
          </ScrollViewer>
        </Border>

        <Border x:Name="errorOverlay" Visibility="Collapsed" Style="{StaticResource ErrorBorderStyle}">
          <Grid>
            <TextBlock Text="Oops!" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,18,0,0" FontSize="24" FontWeight="Bold" />
            <TextBlock Text="{Binding ErrorMessage}" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,58,0,0" FontSize="13.333" FontWeight="Bold" TextWrapping="Wrap" />
            <Button Content="Let me try that again" Command="{Binding AcknowledgeErrorCommand}" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,132,0,0" FontSize="13.333" Padding="20,6" />
          </Grid>
        </Border>
			</Grid>
		</toolkit:BusyIndicator>
	</Border>
</UserControl>
